<template>
  <div>
    <div :class="slideStatus ? 'slideInRight': 'slideOutRight'" class="widget animated faster">
      <div class="widget-item" @click="linkTo('dashboard')">
        <svg-icon class="icon" icon-class="dashboard" />
      </div>
      <div class="widget-item" @click="linkTo('shop-car')">
        <svg-icon class="icon" icon-class="shopCar" />
      </div>
      <div class="widget-item" @click="linkTo('user-center')">
        <svg-icon class="icon" icon-class="user" />
      </div>
      <div class="widget-item" @click="backToTop">
        <svg-icon class="icon ft25" icon-class="icon_top" />
      </div>
      <div class="widget-item" @click="slideTo">
        <svg-icon class="icon" icon-class="icon_right2" />
      </div>
    </div>
    <div :class="slideStatus ? 'slideOutRight': 'slideInRight'" class="widget animated faster">
      <div class="widget-item" @click="slideTo">
        <svg-icon class="icon rotate" icon-class="icon_right2" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      slideStatus: true,
      backPosition: 0
    }
  },
  methods: {
    linkTo(name) {
      this.$router.push({
        name: name
      })
    },
    // 返回顶部
    backToTop() {
      const start = window.pageYOffset
      let i = 0
      this.interval = setInterval(() => {
        const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))
        if (next <= this.backPosition) {
          window.scrollTo(0, this.backPosition)
          clearInterval(this.interval)
        } else {
          window.scrollTo(0, next)
        }
        i++
      }, 16.7)
    },
    easeInOutQuad(t, b, c, d) {
      if ((t /= d / 2) < 1) return c / 2 * t * t + b
      return -c / 2 * (--t * (t - 2) - 1) + b
    },
    // 路由跳转
    slideTo() {
      const slideStatus = this.slideStatus
      this.slideStatus = !slideStatus
    }
  }
}
</script>

<style scoped lang="scss">
  @import "src/styles/mixin.scss";
  .widget{
    position: fixed;
    bottom: 23%;
    width: pxCalc(40px);
    right: 0;
    z-index: 11;
    border-radius: 6px 0 0 6px;
    background: rgba(0, 0, 0, .6);
    &-item{
      text-align: center;
      height: pxCalc(40px);
      line-height: pxCalc(40px);
      .icon{
        color: #fff;
        font-size: pxCalc(18px);
        vertical-align: top;
        margin-top: pxCalc(10px);
        &.ft25{
          font-size: pxCalc(25px);
        }
        &.rotate{
          transform: rotate(-180deg);
        }
      }
    }
  }
</style>
